<template>
    <model title="Geographical distribution">
        <div id="container" style="height: 650px;"></div>

        <div id="result" ref="result">
            <my-table></my-table>
        </div>
    </model>
</template>

<script>
    import MyTable from "../config/myTable";
    export default {
        name: "geographical",
        components: {MyTable},
        mounted() {
            loadJs("/assets/Highmaps-6.1.0/highmaps.js",function () {
                loadJs("/assets/Highmaps-6.1.0/data.js")
            })

            $.getJSON('/PTSG/map/getMapData', function (datas) {
                let mapdata = datas.mapData;
                let germ = datas.germ;

                 new Highcharts.Map('container', {
                     title: {
                         text:  "Geographical distribution"
                     },
                     credits: {
                         enabled: false
                     },
                    mapNavigation: {
                        enabled: true,
                        enableMouseWheelZoom: false,
                        buttonOptions: {
                            verticalAlign: 'bottom'
                        }
                    },
                    tooltip: {
                        useHTML: true,
                        headerFormat: '<table><tr><td> {}</td></tr>',
                        pointFormat: '<tr><td>City:</td><td> {point.properties.fullname}</td></tr>' +
                            '<tr><td>Germ:</td><td> {point.value}</td></tr>' +
                            '<tr><td>Location:</td><td> {point.properties.longitude},{point.properties.latitude}</td></tr>',
                        footerFormat: '</table>'
                    },
                    colorAxis: {
                        min: 0,
                        minColor: '#fff',
                        maxColor: '#1f4e3d',
                        labels: {
                            style: {
                                "color": "red", "fontWeight": "bold"
                            }
                        }
                    },
                    series: [{
                        data: germ,
                        mapData: mapdata,
                        joinBy: 'name',
                        name: '中国地图',
                        allowPointSelect: true,
                        cursor: 'pointer',
                        states: {
                            hover: {
                                color: '#a4edba'
                            },
                            select: {
                                color: 'orange',
                                borderColor: 'black',
                                dashStyle: 'shortdot'
                            }
                        },
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        },
                        point: {
                            events: {
                                click: function () {
                                    let index = layer.load(1);
                                    //中文转码
                                    let value =  encodeURIComponent(this.name,'UTF-8');
                                    $.ajax({
                                        url: "/PTSG/map/getByLocation?location=" + value,
                                        type: "POST",
                                        dataType: "json",
                                        success: function (data) {
                                            $("#table").bootstrapTable('load', data);
                                            layer.close(index);
                                            $("#result").show();
                                            let target_top = $("#result").offset().top;
                                            $("html,body").animate({scrollTop: target_top}, 800);
                                        }
                                    });
                                }
                            }
                        }
                    }]
                });

            })


        }
    }
</script>

<style lang="scss">

    #result{
        display: none;
    }

</style>